<template>
  <div id="qrBox">
    <template>
      <template>
        <el-table
          :data="this.$store.state.wzStore.chooseItem"
          style="width: 100%"
        >
          <el-table-column label="菜品名称">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="菜品数量">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.num }}</span>
            </template>
          </el-table-column>
          <el-table-column label="菜品价格">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.price*scope.row.num }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
    </template>
    <div>
      <router-link to="/DCGL/xuancai"
        ><el-button>继续选菜</el-button></router-link
      >
      <el-button id="sure" @click="sureOrder">确认下单</el-button>
    </div>

    <!-- ------------------------以下是模态框-------------------- -->
    <el-dialog title="下单确认" :visible.sync="dialogVisible" width="30%">
      <h3>菜品数：</h3>
      <el-input
        style="width:200px"
        v-model="this.$store.state.wzStore.chooseItem.length"
        :disabled="true"
      >
      </el-input>
      <h3>总金额：</h3>
      <el-input style="width:200px" v-model="fullPrice" :disabled="true">
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="success">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapActions } from "vuex";
import http from "../../http/http";
export default {
  name: "qrXiaDan",
  computed: {
    fullPrice() {
      let arr = this.$store.state.wzStore.chooseItem;
      let fullPrice = 0;
      for (let i = 0; i < arr.length; i++) {
        fullPrice += arr[i].price*arr[i].num;
      }
      return fullPrice;
    },
  },
  data() {
    return {
      dialogVisible: false
    };
  },
  methods: {
    ...mapActions(["addSeatinfo"]),
    sureOrder() {
      if (
        this.$store.state.wzStore.chooseItem.length != 0 &&
        this.$store.state.wzStore.nowSeat != null
      ) {
        this.dialogVisible = true;
        let nowSeat = this.$store.state.wzStore.nowSeat;
        let seatinfo = this.$store.state.wzStore.seatsInfo;
        // console.log(seatinfo);
        // console.log(nowSeat);
        let flag = seatinfo.findIndex(item => item.id == nowSeat);
        if (flag == -1) {
          //-1表示该餐桌第一次点菜下单
          // console.log('进入-1');
          // console.log(this.fullPrice);
          this.$set(
            this.$store.state.wzStore.seats[nowSeat],
            "fullPrice",
            this.fullPrice
          );
          this.$store.state.wzStore.nowTablePrice = this.fullPrice;
          // console.log(this.$store.state.wzStore.nowTablePrice);
        } else {
          //else表示该餐桌是加菜
          console.log("进else");
          this.$set(
            this.$store.state.wzStore.seats[nowSeat],
            "fullPrice",
            this.$store.state.wzStore.seats[nowSeat].fullPrice + this.fullPrice
          );
          this.$store.state.wzStore.nowTablePrice =
            this.$store.state.wzStore.nowTablePrice + this.fullPrice;
          // console.log(this.$store.state.wzStore.nowTablePrice);
        }

        // console.log(this.$store.state.wzStore.seats[nowSeat]);
      }
    },
    success() {
      this.dialogVisible = false;
      this.$store.state.wzStore.nowPage = 1;
      this.$message({
        message: "下单成功",
        type: "success"
      });
      // ----------------生成餐桌账单---------------------------------------------------
      let obj = {
        id: this.$store.state.wzStore.nowSeat,
        price: this.fullPrice,
        item: [...this.$store.state.wzStore.chooseItem],
        time: this.$store.getters.getDate
      };
      console.log(obj);
      this.addSeatinfo(obj);
      // ---------------------下单成功，修改餐桌状态 然后跳转页面-------------------------
      this.$store.state.wzStore.seats[this.$store.state.wzStore.nowSeat].state =
        "正在使用";
      this.$set(
        this.$store.state.wzStore.seats[this.$store.state.wzStore.nowSeat],
        "show",
        true
      );
      this.$store.dispatch('tableState')
      this.$router.push("/CZGL/realTable");
    },
    handleDelete(index, row) {
      let itemName = this.$store.state.wzStore.chooseItem[index].name;
      this.$store.state.wzStore.chooseItem.splice(index, 1);
      for (let i = 0; i < this.$store.state.wzStore.demo.length; i++) {
        if (this.$store.state.wzStore.demo[i].name == itemName) {
          this.$store.state.wzStore.demo[i].num = 0;
        }
      }
    }
  }
};
</script>

<style lang="less" scoped>
#qrBox {
  div {
    #sure {
      margin: 40px 0 0 40px;
    }
  }
  .el-table {
    margin: auto;
  }
  .el-input__inner {
    width: 200px;
  }
  h3 {
    margin: 10px 0;
  }
}
</style>
